<template>
  <div class="role-status-container">
    <transition name="role-fade" mode="out-in">
      <div :key="currentRole" class="role-status-card">
        <!-- 角色图标区域 -->
        <div class="role-icon-section">
          <div class="role-icon-wrapper" :class="`role-${currentRole}`">
            <el-icon class="role-icon">
              <component :is="roleInfo.icon" />
            </el-icon>
          </div>
          <div class="role-badge" :class="`badge-${currentRole}`">
            {{ roleInfo.badge }}
          </div>
        </div>

        <!-- 角色信息区域 -->
        <div class="role-info-section">
          <h3 class="role-title">{{ roleInfo.title }}</h3>
          <p class="role-description">{{ roleInfo.description }}</p>
          <div class="role-permissions">
            <div class="permission-item" v-for="permission in roleInfo.permissions" :key="permission">
              <el-icon class="permission-icon"><Check /></el-icon>
              <span>{{ permission }}</span>
            </div>
          </div>
        </div>

        <!-- 角色切换区域 -->
        <div class="role-switch-section">
          <el-segmented
            v-model="segmentedValue"
            :options="roleOptions"
            size="small"
            class="role-segmented"
            @change="handleRoleChange"
          >
            <template #default="{ item }">
              <div class="role-option">
                <el-icon class="option-icon">
                  <component :is="item.icon" />
                </el-icon>
                <span class="option-label">{{ item.label }}</span>
              </div>
            </template>
          </el-segmented>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import {
  User,
  Management,
  View,
  Check
} from '@element-plus/icons-vue'

export default {
  name: 'RoleStatus',
  components: {
    Check
  },
  setup() {
    const store = useStore()
    
    // 当前角色
    const currentRole = computed(() => store.getters.currentRole || 'guest')
    
    // 分段选择器值
    const segmentedValue = ref(currentRole.value)
    
    // 角色配置信息
    const roleConfig = {
      guest: {
        icon: View,
        title: '游客模式',
        badge: '游',
        description: '以游客身份浏览南昌旅游景点',
        permissions: ['浏览景点', '查看路线', '基础搜索'],
        color: '#909399',
        gradient: 'linear-gradient(135deg, #909399, #c0c4cc)'
      },
      user: {
        icon: User,
        title: '普通用户',
        badge: '用',
        description: '享受完整的旅游规划功能',
        permissions: ['浏览景点', '智能路线', '预算规划', '收藏景点', '分享路线'],
        color: '#409eff',
        gradient: 'linear-gradient(135deg, #409eff, #66b1ff)'
      },
      admin: {
        icon: Management,
        title: '管理员',
        badge: '管',
        description: '管理系统内容和用户数据',
        permissions: ['景点管理', '用户管理', '系统设置', '数据分析', '内容审核'],
        color: '#67c23a',
        gradient: 'linear-gradient(135deg, #67c23a, #85ce61)'
      }
    }
    
    // 角色信息
    const roleInfo = computed(() => roleConfig[currentRole.value] || roleConfig.guest)
    
    // 角色选项
    const roleOptions = [
      {
        value: 'guest',
        label: '游客',
        icon: View
      },
      {
        value: 'user',
        label: '用户',
        icon: User
      },
      {
        value: 'admin',
        label: '管理员',
        icon: Management
      }
    ]
    
    // 处理角色切换
    const handleRoleChange = (value) => {
      store.dispatch('setRole', value)
      ElMessage.success(`已切换到${roleConfig[value].title}模式`)
    }
    
    // 初始化
    onMounted(() => {
      segmentedValue.value = currentRole.value
    })
    
    return {
      currentRole,
      segmentedValue,
      roleInfo,
      roleOptions,
      handleRoleChange,
      View,
      User,
      Management
    }
  }
}
</script>

<style scoped>
.role-status-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.role-status-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* 角色图标区域 */
.role-icon-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.role-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.role-icon-wrapper.role-guest {
  background: linear-gradient(135deg, #909399, #c0c4cc);
}

.role-icon-wrapper.role-user {
  background: linear-gradient(135deg, #409eff, #66b1ff);
}

.role-icon-wrapper.role-admin {
  background: linear-gradient(135deg, #67c23a, #85ce61);
}

.role-icon {
  font-size: 32px;
  color: white;
  transition: all 0.3s ease;
}

.role-icon-wrapper:hover .role-icon {
  transform: scale(1.1);
}

.role-badge {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 响应式设计：移动端优化 */
@media (max-width: 768px) {
  .role-status-container {
    max-width: 100%;
    padding: 0 12px;
  }
  .role-status-card {
    padding: 20px;
    border-radius: 16px;
    gap: 16px;
  }
  .role-title {
    font-size: 18px;
  }
  .role-description {
    font-size: 14px;
  }
}

.badge-guest {
  background: #909399;
}

.badge-user {
  background: #409eff;
}

.badge-admin {
  background: #67c23a;
}

/* 角色信息区域 */
.role-info-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.role-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  transition: all 0.3s ease;
}

.role-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.role-permissions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
}

.permission-icon {
  font-size: 14px;
  color: #67c23a;
  flex-shrink: 0;
}

/* 角色切换区域 */
.role-switch-section {
  width: 100%;
  margin-top: 8px;
}

.role-segmented {
  width: 100%;
}

.role-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 12px;
}

.option-icon {
  font-size: 16px;
}

.option-label {
  font-size: 11px;
  font-weight: 500;
}

/* 过渡动画 */
.role-fade-enter-active,
.role-fade-leave-active {
  transition: all 0.3s ease;
}

.role-fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.role-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.role-fade-enter-to,
.role-fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .role-status-card {
    padding: 24px 20px;
    gap: 20px;
  }
  
  .role-icon-wrapper {
    width: 60px;
    height: 60px;
  }
  
  .role-icon {
    font-size: 24px;
  }
  
  .role-title {
    font-size: 20px;
  }
  
  .role-description {
    font-size: 13px;
  }
  
  .permission-item {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .role-status-card {
    padding: 20px 16px;
    gap: 16px;
  }
  
  .role-icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .role-icon {
    font-size: 20px;
  }
  
  .role-badge {
    width: 24px;
    height: 24px;
    font-size: 10px;
    bottom: -6px;
    right: -6px;
  }
  
  .role-title {
    font-size: 18px;
  }
  
  .role-description {
    font-size: 12px;
  }
  
  .role-permissions {
    gap: 6px;
  }
  
  .permission-item {
    font-size: 11px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .role-status-card {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .role-title {
    color: #ffffff;
  }
  
  .role-description {
    color: #cccccc;
  }
  
  .permission-item {
    color: #dddddd;
  }
}
</style>